<template>
  <div class="membercenter">
    <div class="header">
      <div class="user">
        <div class="user_name">
          <img src="@/assets/images/membercenter/timg.jpg" />
          <div class="name">
            <h3>是小猴纸</h3>
            <p>积分：124,839,583.00</p>
          </div>
        </div>
        <div class="user_setup">
          <img src="@/assets/images/membercenter/shezhi.png" />
          <img src="@/assets/images/membercenter/xiaoxi.png" />
        </div>
      </div>
    </div>
    <div class="content">
      <ul class="list clearfix">
        <li>
          <p>金额(元)</p>
          <span>0.00</span>
          <img class="fengexian" src="@/assets/images/membercenter/fengexian.png" />
        </li>
        <li>
          <p>代收利息(元)</p>
          <span>0.00</span>
          <img class="fengexian" src="@/assets/images/membercenter/fengexian.png" />
        </li>
        <li>
          <p>代收本金(元)</p>
          <span>0.00</span>
        </li>
      </ul>
      <van-grid :border="false" :column-num="3">
        <van-grid-item>
          <van-button @click="rechargebtn" class="btnclass" type="primary">充值</van-button>
        </van-grid-item>
        <van-grid-item>
          <van-button @click="withdrawalbtn" class="btnclass" type="primary">提现</van-button>
        </van-grid-item>
        <van-grid-item>
          <van-button class="btnclass" type="primary">转账</van-button>
        </van-grid-item>
      </van-grid>
    </div>
    <div class="modular">
      <div class="cell">
        <div class="cell_t">果园</div>
        <div class="column">
          <van-grid :border="false" :column-num="4">
            <van-grid-item>
              <img class="icon" src="@/assets/images/membercenter/wuliuguanli.png" />
              <p>订单管理</p>
            </van-grid-item>
            <van-grid-item>
              <img class="icon" src="@/assets/images/membercenter/shangpinduihuan.png" />
              <p>商品兑换</p>
            </van-grid-item>
            <van-grid-item>
              <img class="icon" src="@/assets/images/membercenter/zijinmingxi.png" />
              <p>资金明细</p>
            </van-grid-item>
            <van-grid-item>
              <img class="icon" src="@/assets/images/membercenter/tianjiayinhangka.png" />
              <p>银行卡</p>
            </van-grid-item>
            <van-grid-item>
              <img class="icon" src="@/assets/images/membercenter/lianxiwomen.png" />
              <p>投资记录</p>
            </van-grid-item>
          </van-grid>
        </div>
      </div>
      <div class="cell">
        <div class="cell_t">帮助</div>
        <div class="column">
          <van-grid :border="false" :column-num="4">
            <van-grid-item>
              <img class="icon" src="@/assets/images/membercenter/chongzhijiaocheng.png" />
              <p>转账充值教程</p>
            </van-grid-item>
            <van-grid-item>
              <img class="icon" src="@/assets/images/membercenter/changjianwenti.png" />
              <p>常见问题</p>
            </van-grid-item>
            <van-grid-item>
              <img class="icon" src="@/assets/images/membercenter/huiyuandengji.png" />
              <p>会员等级</p>
            </van-grid-item>
          </van-grid>
        </div>
      </div>
      <div class="cell">
        <div class="cell_t">关于我们</div>
        <div class="column">
          <van-grid :border="false" :column-num="4">
            <van-grid-item>
              <img class="icon" src="@/assets/images/membercenter/wuliuguanli.png" />
              <p>订单管理</p>
            </van-grid-item>
            <van-grid-item>
              <img class="icon" src="@/assets/images/membercenter/shangpinduihuan.png" />
              <p>商品兑换</p>
            </van-grid-item>
            <van-grid-item>
              <img class="icon" src="@/assets/images/membercenter/zijinmingxi.png" />
              <p>资金明细</p>
            </van-grid-item>
            <van-grid-item>
              <img class="icon" src="@/assets/images/membercenter/tianjiayinhangka.png" />
              <p>银行卡</p>
            </van-grid-item>
            <van-grid-item>
              <img class="icon" src="@/assets/images/membercenter/lianxiwomen.png" />
              <p>投资记录</p>
            </van-grid-item>
          </van-grid>
        </div>
      </div>
      <div class="cell">
        <div class="cell_t">其它</div>
        <div class="column">
          <van-grid :border="false" :column-num="4">
            <van-grid-item>
              <img class="icon" src="@/assets/images/membercenter/wuliuguanli.png" />
              <p>订单管理</p>
            </van-grid-item>
            <van-grid-item>
              <img class="icon" src="@/assets/images/membercenter/shangpinduihuan.png" />
              <p>商品兑换</p>
            </van-grid-item>
            <van-grid-item>
              <img class="icon" src="@/assets/images/membercenter/zijinmingxi.png" />
              <p>资金明细</p>
            </van-grid-item>
            <van-grid-item>
              <img class="icon" src="@/assets/images/membercenter/tianjiayinhangka.png" />
              <p>银行卡</p>
            </van-grid-item>
            <van-grid-item>
              <img class="icon" src="@/assets/images/membercenter/lianxiwomen.png" />
              <p>投资记录</p>
            </van-grid-item>
          </van-grid>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// import { Toast } from "vant";
export default {
  name: "home",
  components: {},
  computed: {},
  data() {
    return {};
  },

  mounted() {},
  created() {},
  methods: {
    detailbtn() {
      this.$router.push({
        path: "/investmentprojectsDetails",
        query: {},
      });
    },
    rechargebtn() {
      this.$router.push({
        path: "/recharge",
        query: {},
      });
    },
    withdrawalbtn() {
      this.$router.push({
        path: "/withdrawal",
        query: {},
      });
    },
  },
};
</script>

<style scoped lang="less">
.membercenter {
  width: 100%;
  height: 100%;
  background: #f7f8f9;

  .header {
    height: 114px;
    background: url("../../../assets/images/membercenter/beijing_top.png")
      no-repeat -20px -10px;
    background-size: 110% 110%;
    position: relative;
    z-index: 99;
    .user {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      padding: 25px 10px 0 24px;
      .user_name {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        img {
          width: 32px;
          height: 32px;
          border-radius: 30px;
          border: 2px solid #baaed8;
        }
        .name {
          margin-left: 13px;
          h3 {
            font-size: 15px;
            font-family: PingFangSC, PingFangSC-Regular;
            font-weight: 400;
            text-align: left;
            color: #ffffff;
          }
          p {
            font-size: 12px;
            font-family: PingFangSC, PingFangSC-Regular;
            font-weight: 400;
            text-align: left;
            color: #f2e4c7;
          }
        }
      }
      .user_setup {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;

        img {
          width: 35px;
          height: 32px;
          margin-left: 10px;
        }
      }
    }
  }
  .content {
    background: #ffffff;
    .list {
      height: 117px;
      background: url("../../../assets/images/membercenter/beijing.png");
      background-size: 100% 100%;
      margin-top: -40px;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      position: relative;
      z-index: 99;
      li {
        float: left;
        text-align: center;
        width: 33%;
        position: relative;

        .fengexian {
          position: absolute;
          right: 0;
          top: 0;
          height: 100%;
          width: 3px;
        }
        p {
          font-size: 13px;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          text-align: center;
          color: #a37543;
          margin-bottom: 10px;
        }
        span {
          font-size: 14px;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          text-align: left;
          color: #343023;
        }
      }
      li:last-child {
        border-right: none;
      }
    }
    .btnclass {
      background: linear-gradient(270deg, #e2c397, #caa262);
      border-radius: 14px;
      border: none;
      width: 83px;
      height: 27px;
      font-size: 13px;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      text-align: left;
      color: #7d5319;
    }
    /deep/.van-grid-item__content {
      padding: 7px 0px 22px 0px;
    }
  }
  .modular {
    padding: 40px 20px;
    background: #ffffff;
    margin-top: 8px;
    .cell {
      margin-bottom: 20px;
      border-bottom: 1px solid #e3e4e5;
      .cell_t {
        height: 13px;
        border-left: 3px solid #f73344;
        font-size: 18px;
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: 500;
        text-align: left;
        color: #333333;
        line-height: 10px;
        padding-left: 4px;
      }
      .column {
        margin-top: 10px;
        .icon {
          width: 55px;
          height: 50px;
        }
        p {
          font-size: 11px;
          font-family: PingFangSC, PingFangSC-Medium;
          font-weight: 500;
          text-align: left;
          color: #333333;
          margin-top: 4px;
          white-space: nowrap;
        }
      }
    }
  }
}
</style>